<script setup lang="ts">
const emit = defineEmits(['filter'])
</script>

<template>
  <div class="filters">
    <button :class="{ active: activeTab === 'all' }" @click="$emit('filter', 'all')">全部</button>
    <button :class="{ active: activeTab === 'active' }" @click="$emit('filter', 'active')">未完成</button>
    <button :class="{ active: activeTab === 'completed' }" @click="$emit('filter', 'completed')">已完成</button>
  </div>
</template>

<style scoped>
.filters {
  display: flex;
  margin-bottom: 20px;
  gap: 15px; /* 使用 gap 替代 margin 控制按钮间距 */
}

.filters button {
  flex: 1;
  padding: 8px 5px; /* 增加垂直内边距 */
  border: 2px solid #ddd;
  background: none;
  cursor: pointer;
  color: #555; /* 默认文字颜色 */
  font-weight: 500; /* 中等字体粗细 */
  border-radius: 4px; /* 轻微圆角 */
  transition: all 0.2s ease; /* 添加过渡效果 */
}

.filters button.active {
  border-color: #42b983;
  background: #42b983;
  color:rgb(243, 243, 243);; /* 选中状态文字颜色改为白色 */
}

.filters button:not(.active):hover {
  background:rgb(209, 247, 199); /* 悬停效果 */
}
</style>